<template>
  <div class="tree-and-fmps panel-bg bg-blur">
    <div class="top">
      <div
        :class="['item', { 'active-item': activeMenu === menu.id }]"
        v-for="menu in menuList"
        :key="menu.id"
        @click="clickMenu(menu)"
      >
        <img src="../../../assets/logo.png" v-show="activeMenu === menu.id" />
        {{ menu.name }}
      </div>
      <div class="hide-box" @click="clickHide">
        <i class="el-icon-close hide"></i>
        <!--        <img src="@/assets/image/home/left/hide.png" class="hide">-->
      </div>
      <!--      <div class="menu-bg" :style="activeMenu === '1' ? 'left: -89px;' : 'left: 1px;'"></div>-->
    </div>
    <div class="content"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {},
})
export default class LeftPanel extends Vue {
  public menuList = [
    { id: "1", name: "图层树" },
    { id: "2", name: "风貌评审" },
  ];

  get activeMenu() {
    return true;
  }

  clickMenu(menu: any) {
    return true;
  }

  clickHide() {
    return true;
  }
}
</script>

<style scoped lang="scss">
.panel-bg {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #4c89b6;
  box-shadow: inset 0 0 20px 2px #4c89b6;
  border-radius: 20px;
}
.tree-and-fmps {
  box-sizing: border-box;
  width: 320px;
  height: 100%;
  color: #fff;
  position: relative;
  transition: all ease 0.3s;
  overflow: hidden;
  .top {
    width: 100%;
    height: 32px;
    padding-left: 20px;
    margin-top: 20px;
    display: flex;
    .item {
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: #c7cbd2;
      margin-right: 20px;
      z-index: 10;
      transition: all ease 0.3s;
      cursor: pointer;
      display: flex;
      align-items: center;
      > img {
        margin-right: 8px;
      }
    }
    .active-item {
      color: #fff;
      /*background: linear-gradient(90deg, #2192B8 0%, rgba(33, 146, 184, 0) 100%);*/
    }
    .menu-bg {
      height: 34px;
      position: absolute;
      top: 8px;
      right: 0;
      /* background: url("../../../assets/image/home/left/menu-bg.png") repeat; */
      transition: all ease 0.3s;
      z-index: 5;
    }
    .hide-box {
      width: 16px;
      height: 16px;
      position: absolute;
      top: 13px;
      right: 10px;
      z-index: 10;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
  .content {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 42px);

    padding: 12px 12px 20px;
  }
}
</style>
